<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

// const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="max-w-xl pl-6"  >
    <figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
      <img
        class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
        src="https://www.tailwindcss.cn/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
        width="384"
        height="512"
      />
      <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
        <blockquote>
          <p class="text-lg font-semibold">“Tailwind CSS是我在大型团队中看到的唯一一个规模化的框架。它易于定制，适应任何设计，并且构建尺寸很小”</p>
        </blockquote>
        <figcaption class="font-medium">
          <div class="text-cyan-600">Sarah Dayan</div>
          <div class="text-gray-500">Staff Engineer, Algolia</div>
        </figcaption>
      </div>
    </figure>
  </div>
</template>

<style scoped>
</style>
